<template>
	<view style="background-color: #FFFFFF;height: 100vh;">
		<hx-navbar ref="hxnb" :config="config" />
		<view class="flex align-center justify-around" style="margin: 35rpx 0;">
			<image src="/clientEnd/static/7578.png" mode="aspectFit" style="width:208rpx;height: 144rpx;"
				@tap="chooseAvatar"></image>
			<view style="color: rgba(30,30,30,0.6);font-size: 28rpx;width: 340rpx;">注：上传的图片不得大于5M，格式为.jpg .png</view>
		</view>
		<view style="margin: 30rpx;">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view class="flex align-center justify-between" style="width:100%;">
					<view v-for="(item,index) in ImageData" :key="index" style="position: relative;">
						<image :src="item" mode="scaleToFill"
							style="width: 198rpx;height: 134rpx;border-radius: 8rpx;margin:15rpx;" @tap="images(item)">
						</image>
						<image src="../../static/install/8011.png" mode="aspectFit"
							style="width:90rpx;height:90rpx;position: absolute;bottom:20rpx;right: 20rpx;"
							@tap="datape(index)"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="width: 690rpx;height: 1rpx;background: rgba(30,30,30,0.2);margin:20rpx auto ;"></view>
		<input style="margin: 30rpx;" type="date" name="" id="" v-model="urlIndex">
		<view class="fabu" @click="release()">发布动态</view>
	</view>
</template>

<script>
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';
	import baseurl from '@/common/config.js'
	export default {
		data() {
			return {
				config: {
					title: '',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				ImageData: [],
				urlIndex: '',
				topicsData: [],
				topicsIndex: []
			}
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
		},
		methods: {
			async chooseAvatar() {
				if (this.ImageData.length == 6) {
					uni.showLoading({
						title: '最多只能上传6张'
					})
					return uni.hideLoading();
				}
				let file = await this.$tools.chooseImg(3, 1, 6)
				if (file) {
					uni.showLoading({
						title: '上传中...'
					})
					file.forEach((item) => {
						this.uploadFile(item.path, 2)
					})
					this.$forceUpdate();
					uni.hideLoading()
					// this.$forceUpdate();
				}
			},
			datape(e) {
				this.ImageData.splice(e, 1)
				this.$forceUpdate();
			},
			images(e) {
				let arr = [e]
				uni.previewImage({
					urls: arr
				});
			},
			// 话题列表
			getTopics(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.navList(data).then((res) => {
					if (num == 1) {
						this.topicsData = res.data.result.list
					} else {
						this.topicsData = this.topicsData.concat(res.data.result.list)
					}
					console.log(res.data.result.list.length, res.data.result.total)
					this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
					console.log('话题1', this.topicsData)
				})
			},
			// 选择话题
			topics(name, id) {
				this.topicsIndex.push('#' + name)
				this.Id = id
				this.topicsData = []
				console.log('话题', this.topicsIndex)
			},
			// 发布动态
			release() {
				if (this.ImageData.length == 0) return this.$tools.showToast('请选择图片')
				console.log(this.ImageData, '大大王')
				// 发布动态
				let data = {
					content: this.urlIndex,
					image: this.ImageData,
					type: this.type,
					id: this.Id
				}
				this.$api.publishDynamic(data).then((res) => {
					console.log('发布动态', res)
					uni.navigateBack(1)
				})
			},
			uploadFile(file, type) {
				uni.uploadFile({
					url: baseurl + '/universal/uploadCloudMore',
					filePath: file,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					formData: {
						'type': type
					},
					success: (res) => {
						this.ImageData.push('http://' + JSON.parse(res.data).result)
					}
				});
			}
		}
	}
</script>

<style scoped>
	.topics {
		width: 138rpx;
		margin: 30rpx;
		background-color: #1E1E1E1A;
		text-align: center;
		line-height: 52rpx;
		border-radius: 12rpx;
		padding: 10rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.fabu {
		margin: 30rpx auto;
		width: 530rpx;
		height: 112rpx;
		background: #492D22;
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		text-align: center;
		line-height: 112rpx;
	}
</style>
